<template>
  <div class="bg-white">
    <Card>
      <Row>
        <Col span="22">
          <SearchForm @get="handleSearch"></SearchForm>
        </Col>
        <Col span="2">
          <div class="btn-wrapper">
            <Button class="editable-add-btn" type="dashed" @click="handleAdd"
              ><template #icon><PlusOutlined /></template>添加用户</Button
            >
          </div>
        </Col>
      </Row>
      <br />
      <Table
        sticky
        :bordered="true"
        :dataSource="dataSource"
        :columns="userColumns"
        :pagination="false"
        :loading="loading"
        :scroll="scroll"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'action'">
            <a @click="edit(record)">编辑</a>
            <Divider type="vertical" />
            <Popconfirm
              v-if="dataSource.length"
              title="是否确认删除？"
              @confirm="onDelete(record)"
              ok-text="确定"
              cancel-text="取消"
            >
              <a>删除</a>
            </Popconfirm>
          </template>
        </template>
      </Table>
      <br />
      <Pagination
        show-size-changer
        v-model:current="current"
        v-model:pageSize="pageSize"
        :total="total"
        :show-total="(total) => `共 ${total} 条`"
        @showSizeChange="onShowSizeChange"
      />
    </Card>
    <EditCreateUser ref="editUser" @submitSuccess="getDataSource" />
  </div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import { Card, Table, Button, Pagination, Row, Col, Divider, Popconfirm, message } from 'ant-design-vue';
import SearchForm from '/@/views/work-order/userManagement/user/component/SearchForm.vue';
import EditCreateUser from '/@/views/work-order/userManagement/user/component/EditCreateUser.vue';
import { deleteUser } from '/@/api/work-order/userManagement/user/user';
import { userColumns } from '/@/views/work-order/userManagement/user/data';
const loading = ref(true);
const scroll = ref<undefined | object>(undefined);
let dataSource = ref();
const groupIdList = ref([]);
let current = ref(1);
const total = ref<number>(0);
const pageSize = ref(10);
let params = {
  current: current.value,
  groupIdList: groupIdList.value,
  size: pageSize.value,
};

// let data = await getUserTable(params);
const getDataSource = async () => {
  try {
    let data = {
      current: 1,
      pages: 10,
      records: [
        {
          email: 'aaaaaaa',
          id: 10,
          name: 'aaaaaaa',
          score: 10,
          subscriptionUrn: 'aaaaaaaaaaaaaa',
          topicUrn: 'aaaaaaaaaaaa',
          totalStar: 10,
        },
      ],
      size: 10,
      total: 10,
    };
    dataSource.value = data.records;
    total.value = data.total;
  } finally {
    loading.value = false;
  }
};
getDataSource();
const onShowSizeChange = (current: number, pageSize: number) => {
  params.size = pageSize;
  params.current = current;
  getDataSource();
};
watch(pageSize, (val) => {
  if (val > 10) {
    scroll.value = { y: 500 };
  } else {
    scroll.value = undefined;
  }
  params.size = pageSize.value;
});
watch(current, () => {
  params.current = current.value;
  getDataSource();
});

const handleSearch = (groupIdList) => {
  params = {
    current: current.value,
    groupIdList: groupIdList,
    size: pageSize.value,
  };
  getDataSource();
};

const editUser = ref();
const handleAdd = () => {
  editUser.value.openCreate();
};

const edit = async (record) => {
  editUser.value.openEdit(record);
};

const onDelete = async (record) => {
  let res = await deleteUser({ worksheetUserId: record.id });
  if (res) {
    message.success('删除成功');
  }
  getDataSource();
};
</script>
<style lang="less">
.ant-pagination {
  float: right;
}
.btn-wrapper {
  float: right;
}
</style>
